<template>
    <div>
        <div class="menuleft">
            <el-col>
                <!-- <el-menu :default-active="activeIndex" class="el-menu-vertical-demo">
                    <el-menu-item index="1" class="li-back-index">
                        <router-link to="/home">
                            <i class="icon iconfont icon-ziyuan"></i>&nbsp;返回首页
                        </router-link>
                    </el-menu-item>
                    <el-menu-item index="2" @click="isshow1 = !isshow1" class="li-title">
                        <i class="icon iconfont icon-shenqing"></i>&nbsp;我申请的
                    </el-menu-item>
                    <el-menu-item index="2"  v-show="isshow1"  class="li-items">
                        <router-link to="/notSponsor">未发起
                        </router-link>
                    </el-menu-item>
                    <el-menu-item index="2"  v-show="isshow1"  class="li-items">
                        <router-link to="/alreadySponsor">
                            <i :style="AlreadyLaunched ? 'color:#FF4949;font-size:20px;margin-left:-20px;padding:0 5px;': 'visibility:hidden;font-size:20px;margin-left:-20px;padding:0 5px;'">●</i>已发起
                        </router-link>
                    </el-menu-item>
                    <el-menu-item index="3" @click="isshow2 = !isshow2" class="li-title" v-if="permissions.indexOf('我审核的')>-1">
                        <i class="icon iconfont icon-approval"></i>&nbsp;我审核的
                    </el-menu-item>
                     <el-menu-item index="3"  v-show="isshow2"  class="li-items" v-if="permissions.indexOf('待审核')>-1">
                        <router-link to="/notAudit">
                            <i :style="WaitForAudit ? 'color:#F7BA2A;font-size:20px;margin-left:-20px;padding: 0 5px;': 'visibility:hidden;font-size:20px;margin-left:-20px;padding:0 5px;'">●</i>待审核
                        </router-link>
                     </el-menu-item>
                     <el-menu-item index="3"  v-show="isshow2"  class="li-items" v-if="permissions.indexOf('已审核')>-1">                    
                        <router-link to="/alreadyAudit">
                            <i :style="Audited ? 'color:#FF4949;font-size:20px;margin-left:-20px;padding:0 5px;': 'visibility:hidden;font-size:20px;margin-left:-20px;padding:0 5px;'">●</i>已审核
                        </router-link>
                     </el-menu-item>
                </el-menu> -->
                 <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
                    <el-menu-item index="1">
                        <router-link to="/home"><i class="icon iconfont icon-ziyuan"></i>返回首页</router-link>
                    </el-menu-item>
                    <el-submenu index="2" v-if="permissions.indexOf('我的申请')>-1">
                        <template slot="title"><i class="icon iconfont icon-shenqing"></i>我的申请</template>
                        <el-menu-item index="2-1" v-if="permissions.indexOf('未发起')>-1">
                            <router-link to="/notSponsor">
                                未发起
                            </router-link>
                        </el-menu-item>
                        <el-menu-item index="2-2" v-if="permissions.indexOf('已发起')>-1">
                            <router-link to="/alreadySponsor">
                                <i :style="AlreadyLaunched ? 'color:#FF4949;font-size:20px;margin-left:-20px;padding:0 5px;': 'visibility:hidden;font-size:20px;margin-left:-20px;padding:0 5px;'">●</i>已发起
                            </router-link>
                        </el-menu-item>
                    </el-submenu>
                    <el-submenu index="3" v-if="permissions.indexOf('我审核的')>-1">
                        <template slot="title"><i class="icon iconfont icon-approval"></i>我审核的</template>
                        <el-menu-item index="3-1" v-if="permissions.indexOf('待审核')>-1">
                            <router-link to="/notAudit">
                                <i :style="WaitForAudit ? 'color:#F7BA2A;font-size:20px;margin-left:-20px;padding: 0 5px;': 'visibility:hidden;font-size:20px;margin-left:-20px;padding:0 5px;'">●</i>待审核
                            </router-link>
                        </el-menu-item>
                        <el-menu-item index="3-2" v-if="permissions.indexOf('已审核')>-1">
                            <router-link to="/alreadyAudit">
                                <i :style="Audited ? 'color:#FF4949;font-size:20px;margin-left:-20px;padding:0 5px;': 'visibility:hidden;font-size:20px;margin-left:-20px;padding:0 5px;'">●</i>已审核
                            </router-link>
                        </el-menu-item>
                    </el-submenu>
                </el-menu>
            </el-col>
        </div>
        <div class="content-box">
            <div class="index-content">
                <div class="index-info">
                    <div class="index-msg">
                        <a href="#" @click="OpenNotice">{{this.startList.Notice_Title==='' ? '暂无公告':this.startList.Notice_Title}}</a>
                        <span title="关闭消息"></span>
                    </div>
                    <div class="index-user-img">
                        <img :src="LOGO" alt="">
                    </div>
                    <div class="index-user-info">
                        <p style="color:#2a56ad;">
                            您有以下<span style="color:#2a56ad;font-size:18px;">待办</span>任务：
                        </p>
                        <div class="index-user-count">
    						<div @click="notAudit"><span>审核单据</span><span>{{this.startList.Unaudited}}</span></div>
                            <div @click="Reply"><span>沟通修改</span><span>{{this.startList.Reply}}</span></div>
                        </div>
                    </div>
                </div>
                <p class="index-des">
                    <el-row  class="row-bg">
                        <el-col :span="24">快捷入口</el-col>
                    </el-row>
                </p>
                <div class="index-entry" >
                    <el-row type="flex" justify="space-around">             
                        <el-col :span="4">
                            <a href="javascript:;" @click="Expense()">
                                <img src="/static/content/images/Business/expense.png" alt=""></a>
                            <p>报销单</p>
                        </el-col>
                        <el-col :span="4">
                            <a href="javascript:;" @click="borrowMoney()">
                                <img src="/static/content/images/Business/borrow.png" alt=""></a>
                            <p>借款单</p>
                        </el-col>
                        <el-col :span="4">
                            <a href="javascript:;" @click="Income()">
                                <img src="/static/content/images/Business/income.png" alt=""></a>                        
                            <p>收入确认单</p>
                        </el-col>
                        <el-col :span="4">
                            <a href="javascript:;" @click="Entrance()">
                                <img src="/static/content/images/Business/cashier.png" alt=""></a>                        
                            <p>出纳</p>
                        </el-col>
                        <el-col :span="4">
                            <a href="javascript:;" @click="keeper()">
                                <img src="/static/content/images/Business/ledger.png" alt=""></a>                       
                            <p>总账</p>
                        </el-col>
                    </el-row>                    
    			</div>
            </div>
        </div>
        <!--公共列表-->
        <el-dialog 
        title="公告列表" 
        :visible.sync="dialogNoticeListVisible"
        size="small"
        :modal-append-to-body="false" 
        align="center">
            <el-table class="indexList" v-if="dataList" :data="dataList" highlight-current-row v-loading="loading" header-align="center" element-loading-text="正在加载中">
                <el-table-column label="序号" type="index" width="150" sortable></el-table-column>
                <el-table-column property="Notice_Title" label="公共标题" show-overflow-tooltip></el-table-column>
                <el-table-column property="Notice_CreateBy" label="发布人"></el-table-column>
                <el-table-column property="Notice_CreateDate" label="发布日期" :formatter="formatDate"></el-table-column>
                <el-table-column label="操作" width="150">
				    <template slot-scope="scope">
                        <el-button-group>
                            <el-button size="small" @click="checkContent(scope.$index, scope.row)">查看内容</el-button>
                            <el-button size="small" v-if="scope.row.AttachmentCount>0" class="icon iconfont icon-attachment"></el-button>
                        </el-button-group>
				    </template>
                </el-table-column>
            </el-table>
        </el-dialog>

        <!--公共内容-->
        <el-dialog
        :visible.sync="dialogNoticeVisible"
        :modal-append-to-body="false" 
        size="tiny"
        align="center">
        <div class="gg-bg">
            <h2 style="position:absolute;width:563px;left:50%;margin-left:-281.5px;top:200px;}">{{Content.Notice_Title}}</h2>
            <p v-if="startList.Notice_CreateBy">
                <el-tag type="success" style="float:right;font-size:14px;margin-bottom:20px;">创建人：{{Content.Notice_CreateBy}}</el-tag></p>
            <p style="font-weight:bold;text-indent:2em;text-align:left;left:90px;top:240px;width:410px;line-height:2;position:absolute;">
                {{Content.Notice_Content}}
            </p>
            <p style="position:absolute;right:90px;bottom:180px;">
                <span style="font-size:14px;font-weight:bold">{{Content.Notice_CreateBy}}</span>
            </p>
            <p v-if="startList.Notice_CreateDate" style="position:absolute;right:90px;bottom:130px;">
                <span style="font-size:14px;font-weight:bold">{{formatTime(Content.Notice_CreateDate)}}</span>
            </p>
            <p style="position:absolute;right:90px;bottom:90px;" class="cover">
                <el-button size="small" style="font-size:12px;margin:0;" @click="openUploadDialog">
                  &nbsp;附件
                </el-button> 
            </p>
        </div>
        </el-dialog>
        <!--附件-->
        <el-dialog title="附件" :visible.sync="dialogUploadVisible" :modal-append-to-body="false" >
          <label for="file" class="label-file"><i class="icon iconfont icon-shangchuan">&nbsp;</i>上传</label>
          <input name="file" id="file" type="file" accept="*" @change="update" multiple/>
          <div><br></div>
          <ul ref="images" style="display:none" >
            <li v-for="(item, index) in UploadList" :key="index">
              <!-- <img :src="`http://192.168.1.188:8011/${item.Attachment_Url}`" :alt="item.Attachment_FileName"> -->
              <img :src="item.Attachment_Url" :alt="item.Attachment_FileName">
            </li>
          </ul>
          <el-table :data="UploadList" header-align="center" id="test" >
            <el-table-column property="ID" label="ID" width="100"></el-table-column>
            <el-table-column property="Attachment_UploadDate" label="日期" :formatter="formatUploadDate"></el-table-column>
            <el-table-column property="Attachment_FileName" label="名称" show-overflow-tooltip></el-table-column>          
            <el-table-column label="操作" max-width="100">
              <template slot-scope="scope">
                <div style="display:inline-block;">
                  <el-button v-if='isShowPreview(scope.row.Attachment_FileName)' type="info" size="small" @click="preview(scope)">
                    &#12288;<i class="el-icon-search"></i>预览&#12288;
                  </el-button>
                </div>
                <a class="down" :href="scope.row.Attachment_Url" :download='scope.row.Attachment_FileName'>下载</a>
                <el-button type="danger" size="small" @click="DeleUpload(scope.$index, scope.row)">&#12288;删除&#12288;</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-dialog>
        <router-view></router-view>
    </div>
</template>
<script>
import { mapState, mapGetters } from 'vuex'
export default {
    name: "Home",
    data() {
        return {
            headerInfoAvatar:'/static/content/images/header/header-info-avatar.jpg',
            dialogNoticeVisible:false,
            dialogNoticeListVisible:false,//列表
            activeIndex:"1",
            ShotName:'',
            DocNo:"",
            DocType:801,
            loading:false,
            LOGO:'',
            dataList:[],
            dialogUploadVisible: false,//上传窗口
            UploadList: [], //附件列表数据
            permissItem:[],
            Content:[],
            startList:{}
        }
    },
    methods:{
        formatDate(row, column) {
            return row.Notice_CreateDate.split("T", 1);
        },
        formatUploadDate(row, column) {
            return row.Attachment_UploadDate.split("T", 1);
        },
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        },
        element(Title,Url){
            var flag = true;
            this.permissItem.forEach(element => { 
                console.log(element.Title,'element.Title')
                console.log(Title,'Title')
                if(element.Title===Title){
                    this.$router.push({
                        path:'/'+Url,
                        query:{
                            News:true
                        }
                    });
                    flag = false;
                }
            });
            if(flag){
                this.$message({
                    message: '未有权限！',
                    type: 'warning'
                })
            }
        },
        //未发起
        notSponsor(){
            this.$router.push('/notSponsor');            
        },
        //已发起
        alreadySponsor(){
            this.$router.push('/alreadySponsor');
        },
        //待审核
        notAudit(){
            this.$router.push('/notAudit');
        },
        //已审核        
        alreadyAudit(){
            this.$router.push('/alreadyAudit');            
        },
        Reply(){
            this.$router.push('/Reply');
        },
        Expense(){
            this.element('报销单','Expense');
        },
        borrowMoney(){
            this.element('借款单','borrowMoney');          
        },
        Income(){
            this.element('收入确认单','Income');             
        },
        Entrance(){
            this.element('出纳','Entrance');     
        },
        keeper(){
            this.element('总账','proof');     
        },
        //获得开始
        getStart(){
            axios.get('getStartList').then(res=>{
                this.startList = res;
            }).catch(err=>{
                console.log(err);
            })
        },

        async OpenNotice(){
            this.dialogNoticeListVisible = true;
            this.loading = true;
            const res = await axios.get('getAnnounceList');
            this.dataList = res.rows;
            this.loading = false;
        },
        async checkContent(index,row){
            this.dialogNoticeVisible = true;
            this.loading = true;
            this.DocNo = row.Notice_DocNO;
            this.Content = await axios.post('GetAnnounceEntity',{
                key:row.ID
            });
            console.log(this.Content,'this.Content');
            this.loading = false;
        },
        //获取用户权限
        getPermiss(){
			axios.get('getPermissions').then(res=>{
                this.permissItem = res.data
			}).catch(err=>{
				console.log(err);        
			}) 
        },
        //打开附件列表窗口
        openUploadDialog() {   
            this.dialogUploadVisible = true;
            this.getUploadList();
        },
        //附件列表
        async getUploadList() {
            const res = await axios.get('UploadList', {
                key: this.DocNo,
                type: this.DocType,
                page: 1, //一页
                rows: 5000 //显示5000条
            })
            this.UploadList = res.rows;
        },
        //删除附件
        async DeleUpload(index,row) {
            const res = await axios.get('deleUpload',{key:row.ID})
            if (res.Success) {
                this.$message({
                    message: res.Message,
                    type: "success"
                })
                this.getUploadList();
            }else{
                this.$message({
                    message: res.Message,
                    type: "error"
                })
            }
        },
        //判断是否显示预览按钮
        isShowPreview (name) {
            var fileType = ['gif','jpg','png','JPG','PNG'];
            var temp = name.substring(name.lastIndexOf('.')+1);
            if(fileType.indexOf(temp) > -1) {
                return true
            }else {
                return false
            }
        },
        //开始上传附件
        update(e) {
            for(var i=0 ;i < e.target.files.length;i++){
            let file = e.target.files[i];
            let param = new FormData(); //创建form对象
            param.append("fileData", file); //通过append向form对象添加数据
            param.append("chunk", "0"); //添加form表单中其他数据
            param.append("key", this.DocNo); //添加form表单中其他数据
            param.append("Type", this.DocType);
            console.log(param.get("file")); //FormData私有类对象，访问不到，可以通过get判断值是否传进去
            let config = {
                headers: {
                "Content-Type": "multipart/form-data"
                }
            }; //添加请求头
            axios
                .post("Upload", param, config)
                .then(res => {
                if (res.Success) {
                    this.$message({
                    message: `上传成功`,
                    type: "success",
                    duration: 800
                    });
                } else {
                    this.$message({
                    message: res.Message,
                    type: "warning",
                    duration: 2000
                    });
                }
                this.getUploadList();
                })
                .catch(err => {
                    console.log(err)
                });
            }
        },
        preview(scoped) {
        if (this.viewer) {
            this.viewer.destroy();
        }
        this.viewer = new this.$Viewer(this.$refs["images"], {
            url: "src",
            toolbar: {
            zoomIn: {
                show: 4,
                size: "large"
            },
            zoomOut: {
                show: 4,
                size: "large"
            },
            prev: {
                show: 4,
                size: "large"
            },
            next: {
                show: 4,
                size: "large"
            },
            rotateLeft: {
                show: 4,
                size: "large"
            },
            rotateRight: {
                show: 4,
                size: "large"
            }
            }
        });
        this.$refs["images"].childNodes[scoped.$index].childNodes[0].click()
        },
    },
    created(){
        const companyName = localStorage.getItem('ShortName');
        const logoImg = localStorage.getItem('LOGO');
        const user = sessionStorage.getItem('user');
        this.ShortName = companyName;
        this.LOGO = logoImg;
        //获取用户权限
        this.getPermiss();
        this.getStart();
    },
    computed: {
            ...mapGetters({
                permissions: 'permissions',
                WaitForAudit: 'WaitForAudit',
                AlreadyLaunched: 'AlreadyLaunched',
                Audited: 'Audited'
            })
    },
}
</script>
<style scoped lang="scss">
@import '../../common/css/index.css';
.index-content{
    margin: 0;
    .index-info{
        width: 50vw;
        height:240px;
        background-color: #FFF;
        margin: 5vh auto 0 auto;
        box-shadow: 1px 1px 5px 1px #DDD;
        .index-msg {
            position: relative;
            height: 50px;
            line-height: 50px;
            background-color: #f8f6d7;
            text-indent: 30px;
            z-index: 99;
            &::before{
                position: absolute;
                display: inline-block;
                content: '';
                width: 22px;
                height: 22px;
                top: 14px;
                left: 20px;
                background: url(../../assets/img/index/index-msg-cast.png) no-repeat;
            }
            a {
                display: inline-block;
                color: #b2915f;
                width: 92%;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                &:hover{
                }
            }
            span {
                position: absolute;
                right: 0;
                top: 0;
                width: 50px;
                height: 50px;
                cursor: pointer;
                background: url(../../assets/img/index/index-msg-close.png) no-repeat 50% 50%;
            }
        }
        .index-user-img{
            float: left;
            width: 120px;
            height: 120px;
            line-height: 120px;            
            text-align: center;
            padding:35px 70px;
            img {
                width: 100%;
                height: 100%;
                border-radius: 50%;
                vertical-align: middle;
            }
        }
        .index-user-info{
            float: left;
            height: 270px;
            p:first-child {
                margin-top: 30px;
                font-size:20px;
                span {
                    font-size: 22px;
                }
            }
            p:nth-child(2) {
                color: #3b5b98;
            }
            hr{
                border: 0;
                height: 1px;
                background-color: #dfe0e4;
                margin: 20px 40px 20px 0;
            }
            .index-user-count {
                margin-left: 40px;
                overflow: hidden;
                margin-top:30px;
                div{
                    float: left;
                    width: 100px;
                    margin:0 20px;
                    span{
                        text-align: center;
                        display: block;
                        width: 100%;
                        margin-bottom: 5px;
                    }
                    span:first-child {
                        color: #a5adba;
                    }
                    span:last-child {
                        font-size: 40px;
                        color: #F7BA2A;
                    }
                }
            }
        }
    }
    .index-des{
        width:50vw;
        margin: 1% auto 1% auto;
        font-size: 16px;
        font-weight: bold;
    }
    .index-entry{
        width: 50vw;
        height: 150px;
        line-height: 120px;
        background-color: #FFF;
        margin: 0 auto;
        box-shadow: 1px 1px 5px 1px #DDD; 
        a{
            display: block;
            padding: 0 4vh;
            img{
                width: 100%;
                height: 100%;
                vertical-align: middle;
            }        
        }
        p{
            line-height: 1vh;
            height: 1vh;
            text-align: center;
        }
    }
}
</style>